<template>
    <view :style="{'height':windowHeight, 'width':windowWidth,'background-color':'#F1F1F1'}">
        <view>

            <uni-row>
                <uni-col :span="20">
                    <view><uni-search-bar :radius="100" @confirm="search" v-model="searchWord" @input="fetchAllRepairRecords" placeholder="台站名称"></uni-search-bar></view>
                </uni-col>
                <uni-col :span="3"><view></view></uni-col>
                <uni-col :span="1">
                    <view style="margin-top: 0.5rem; margin-left: 0.5rem; ">
                        <uni-icons type="plusempty" size="30" @click="navigateToAddRepairRecord()" ></uni-icons>
                    </view>
                </uni-col>
            </uni-row>
            <view>
                <scroll-view>
                    <uni-list >
                        <view v-for="repairRecord in repairRecords" :key="repairRecord.stationCode">
                            <uni-list-chat
                                    v-bind:title="repairRecord.stationCode + ' ' + repairRecord.stationName"
                                    v-bind:note="repairRecord.repairContent"
                                    v-bind:time="repairRecord.repairDate"
                                    clickable="true"
                                    @click="navigateToRepairRecordInfo(repairRecord.id)"
                                    v-bind:stationCode="repairRecord.stationCode"
                            ></uni-list-chat>
                        </view>
                    </uni-list>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "RepairRecordMain",
        data() {
            return {
                windowWidth: '375px',
                windowHeight: '667px',
                stationCode: '',
                searchWord: '',
                repairRecords:[
                    // {
                    //     id: '1',
                    //     stationCode: 'G1121',
                    //     stationName: '笋岗',
                    //     repairDate: '2021-11-23 09:00:11',
                    //     repairContent: 'WSP3103',
                    // }
                ]
            }
        },
        onLoad: function(options) {
            this.windowWidth = options.windowWidth
            this.windowHeight = options.windowHeight
            this.stationCode = options.stationCode

            this.fetchAllRepairRecords()
        },
        methods: {
            fetchAllRepairRecords() {

                this.stationCode = this.stationCode === undefined ? '' : this.stationCode
                this.searchWord = this.searchWord === undefined ? '' : this.searchWord
                uni.showLoading({
                    title: '抢修记录'
                })
                this.uniRequest({
                    url: '/stations/repairRecords',
                    data: {
                        stationCode: this.stationCode,
                        searchWord: this.searchWord
                    },
                    method: 'GET',
                }).then((res) => {
                    console.log('fetchAllRepairRecords Response: ', res)
                    this.repairRecords = res.data;
                    uni.hideLoading()
                }).catch((err) => {
                    console.log('fetchAllRepairRecords error: ', err)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '抢修记录列表获取失败！ ',
                        duration: 2000
                    })
                });
            },
            navigateToRepairRecordInfo(recordId) {
                uni.navigateTo({
                    url: '/pages/repair/RepairRecordInfo?windowHeight=' + this.windowHeight + '&windowWidth=' + this.windowWidth + '&recordId=' + recordId

                })
            },
            navigateToAddRepairRecord() {
                uni.navigateTo({
                    url: '/pages/repair/RepairRecordUpdate?windowHeight=' + this.windowHeight + '&windowWidth=' + this.windowWidth + '&action=create&stationCode=' + this.stationCode
                })
            }
        }
    }
</script>

<style scoped>

</style>